<template>
  <a-layout>
    <a-layout-header class="header">
      <h1 class="admin-name">Antd-Admin</h1>
      <a-menu selectable
              v-model:selectedKeys="currentName"
              class="top-menu"
              theme="dark"
              mode="horizontal"
              :style="{ lineHeight: '64px' }"
              @click="menuRoute">
        <a-menu-item v-if="user.level === 0" disabled key="Dashboard">系统监控</a-menu-item>
        <a-menu-item key="ProfilePanel">个人中心</a-menu-item>
        <a-menu-item v-if="user.level === 0" key="BlogManager">文章管理</a-menu-item>
        <a-menu-item v-if="user.level === 0" disabled key="OpensourceManager">开源项目管理</a-menu-item>
        <a-menu-item v-if="user.level === 0" key="UserPanel">用户管理</a-menu-item>
        <a-menu-item v-if="user.level === 0" disabled key="SystemSetting">系统管理</a-menu-item>
      </a-menu>
      <a-space :size="10" class="user-info">
        <a-avatar size="large" src="" alt="" class="user-avatar">{{ user.name?.charAt(0) }}</a-avatar>
        <span class="user-name">{{user.name}}</span>
        <a-button type="warn" @click="logout">登出</a-button>
      </a-space>
    </a-layout-header>
    <a-layout-content class="layout-content">
      <router-view />
    </a-layout-content>
    <a-layout-footer>
      <p>CopyRight © 2021-2022 正义OvO All Reserved</p>
    </a-layout-footer>
  </a-layout>
</template>

<script setup>
import {UserOutlined} from "@ant-design/icons-vue";
import {onMounted, ref} from "vue";
import {useRoute, useRouter} from "vue-router";
import {notification} from "ant-design-vue";
import {apiPut} from "../../fentch";

const user = ref({})

const router = useRouter()

const currentName = ref([router.currentRoute.value.matched[1].name])

const logout = async () => {
  apiPut('/auth/logout', {}).then(res => {
    if (res.data.code === 0) {
      window.localStorage.removeItem('token')
      window.localStorage.removeItem('user')
      router.push('/login')
      return
    }
    message.error(res.data.message)
  })
}

const menuRoute = event => {
  let routePath = router.getRoutes().find(route => event.key===route.name);
  router.push(routePath.path)
}

onMounted(() => {
  user.value = JSON.parse(window.localStorage.getItem('user'))
})
</script>

<style scoped>
.header {
  display: flex;
  position: fixed;
  z-index: 99;
  width: 100%;
}

.admin-name {
  color: #ffffff;
  margin-right: 40px;
}

.top-menu {
  flex: 1;
}

.user-info {
  color: #ffffff;
  height: 64px;
}

.layout-content {
  margin-top: 64px;
}

.user-avatar {
  background-color: #1890FF;
}
</style>